<template>
	<view class="wrap">
		<view class="t-header">
			<g-header title="销售总额" rtype="search"></g-header>
			<view class="filter u-flex">
				<view class="filter-item u-flex-1 app_flex-aicjcc">
					<text class="app_arrow" :class="{active: filterType == 'date'}"
						@click="showDatePicker = true">{{dateObj.dateTypeName}}</text>
				</view>
				<view class="filter-item u-flex-1 app_flex-aicjcc">
					<text class="app_arrow" :class="{active: filterType == 'type'}"
						@click="showCategory = true">产品筛选</text>
				</view>
			</view>
		</view>
		<view class="box bw">
			<view class="box-main">
				<view class="box-main_top app_flex">
					<view class="diagram">
						<!-- <image src="../../static/images/data-1.png"></image> -->
						<qiun-data-charts type="ring" :opts="copts" :chartData="c1data" />
					</view>
					<view class="data">
						<view class="data-item">
							<view class="data-item_label">总销售金额(元)</view>
							<view class="data-item_content">{{salesSum}}</view>
						</view>
						<view class="data-item">
							<view class="data-item_label dot-blue app_arrow" @click="onSkipTap('salesAmount-more')">实际销售金额 100%</view>
							<view class="data-item_content">{{salesSum}}</view>
						</view>
						<view class="data-item">
							<view class="data-item_label dot-red">退货金额 0%</view>
							<view class="data-item_content">0</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="detail" v-for="(item,index) in list" :key="index">
			<view class="detail-date">
				{{index}}
			</view>
			<view class="list">
				<view v-for="(val, idx) in item" :key="idx"  class="item bw"@click="onSkipTap('salesWaterDetail', val.saleslipId)">
					<view class="item-T app_flex-jcsb">
						<view>{{val.customer}} {{val.tel}}</view>
						<view>￥{{val.contractPrices}}</view>
					</view>
					<view class="item-B app_flex-jcsb">
						<view class="item-BL">
							<text v-if="val.category == 0" class="item-channel online">线上</text>
							<text v-if="val.category == 1" class="item-channel offline">线下</text>
							<text>{{val.code}}</text>
						</view>
						<view>{{val.saleslipDate}}</view>
					</view>
				</view>
			</view>
		</view>
		<no-more></no-more>
		<g-time-picker :show="showDatePicker" @change="onTimePickerFlagChange" @dateChange="onPickerDateChange">
		</g-time-picker>
		<u-popup v-model="showCategory" mode="right" z-index="10088">
			<view class="pop">
				<view class="pop-header app_flex-aicjcsb">
					<view class="pop-header-L">产品筛选</view>
					<view class="pop-header-R">
						<u-checkbox shape="circle"></u-checkbox>
						<text>全选</text>
					</view>
				</view>
				<scroll-view class="pop-main" scroll-y>
					<!-- 					<view class="item">
						<item class="item-title app_flex-aic app_arrow active">
							<u-checkbox label-size="0" shape="circle"></u-checkbox><text>商品类目</text>
						</item>
						<view class="item-main">
							<view class="item-main_item" :class="{active: index == 0 || index == 1}"
								v-for="(item, index) in list" :key="index">蕾丝</view>
						</view>
					</view> -->
					<block v-for="(item, index) in typeList" :key="index">
						<view class="pop-item" @click="onTypeItemTap(index)">
							<item class="pop-item-title app_flex-aic app_arrow"
								:class="{active: activeTypeIndex == index}">
								<u-checkbox shape="circle">{{item.typeTitle}}</u-checkbox>
							</item>
						</view>
						<view class="pop-item-main" v-if="index == activeTypeIndex">
							<view class="pop-item-main_item" :class="{active: val.active}"
								v-for="(val, idx) in typeList[activeTypeIndex].children" :key="idx"
								@click="onSTypeItemTap(index, idx)">
								{{val.typeTitle}}
							</view>
						</view>
					</block>
				</scroll-view>
				<view class="pop-btn app_flex-aic">
					<!-- <view class="reset app_flex-aicjcc">重置</view> -->
					<button class="pop-reset" hover-class="pop-btnHover" @click="onTypePopResetTap">重置</button>
					<g-btn :customstyle="{width: '330rpx', height: '90rpx'}" @click="onTypePopConfirmTap"></g-btn>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			const days = []
			const day = date.getDate()
			for (let i = 1990; i <= date.getFullYear(); i++) {
				years.push(i)
			}
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			for (let i = 1; i <= 31; i++) {
				days.push(i)
			}
			const initBeginDate = new Date(year, month - 1, day - 7 + 1).Format('yyyy-MM-dd')
			const copts = {
				timing: "easeOut",
				duration: 1000,
				rotate: false,
				rotateLock: false,
				color: ["#4C88FF", "#FF6666", "#FAC858", "#91CB74", "#73C0DE", "#3CA272", "#9A60B4",
					"#ea7ccc", "#ea7ccc"
				],
				padding: [0, 0, 0, 0],
				fontSize: 13,
				fontColor: "#666666",
				dataLabel: false,
				dataPointShape: false,
				dataPointShapeType: "solid",
				touchMoveLimit: 60,
				enableScroll: false,
				enableMarkLine: false,
				legend: {
					show: false
				},
				title: {
					name: ""
				},
				subtitle: {
					name: ""
				},
				extra: {
					ring: {
						ringWidth: 20,
						border: false
					},
					tooltip: {
						fontSize: 6
					}
				}
			}
			return {
				offlineProportion: 0,
				offlineSalesSum: 0,
				onlineProportion: 0,
				onlineSalesSum: 0,
				salesSum: 0,
				filterType: 'none',
				showDatePicker: false,
				showCategory: false,
				beginTime: '', // 
				endTime: '', // 结束日期(yyyy-MM-dd)
				dateType: '', // 日期范围类型：0-自定义; 1-近7天; 2-近两周; 3-近三周; 4-本月
				productTypeId: '', // 商品类型（传一级类型ID会查出对应的一级及二级类型商品）
				list: [],
				typeList: [],
				activeTypeIndex: 0,
				typeListChildren: [],
				years,
				year,
				months,
				month,
				days,
				day,
				value: [9999, month - 1, day - 1],
				dateObj: {
					beginDate: '1980-01-01',
					endDate: date.Format('yyyy-MM-dd'),
					dateType: 0, // 1:近七天，2:近两周，3:近三周，4:近一月，0:自定义
					dateTypeName: '全部'
				},
				copts,
				c1data: {}
			}
		},
		onLoad(options) {
			
			this.updatePage()
		},
		methods: {
			async updatePage() {
				try {
					this.resetPage()
					this.getSalesWaterList()
					let typeList = await this.getProductTypeList()
					let typeListChildren = await this.getProductTypeChildren(typeList[0].id)
				} catch (e) {
					uni.showToast({
						title: e,
						icon: 'none'
					})
				}
			},
			resetPage() {
				this.list = []
				this.page = 1
				this.size = 15
				this.hasLoad = false
				this.noMore = false
			},
			onSkipTap(type, params) {
				const urlObj = {
					'salesAmount-more': '/pages/analysis/salesAmount-more',
					addSalesOrder: '/pages/salesManagerment/addSalesOrder?titleType=1',
					salesWaterDetail: `/pages/analysis/salesWaterDetail?saleslipId=${params}`
				}
				this.$g_util.navigationTo(urlObj, type)
			},
			onDatePickerChange(val) {
				this.showDatePicker = val
			},
			onCategoryChange(val) {
				this.showCategory = val
			},
			getSalesWaterList() {
				let {
					beginDate: beginTime,
					dateType: dateType,
					endDate: endTime
				} = this.dateObj
				this.$g_api.salesDataSaleroomList({
					beginTime,
					endTime,
					dateType,
					// shopId: 58,
					productTypeId: this.productTypeId
				}).then(({
					data
				}) => {
					this.offlineProportion = data.offlineProportion || 0
					this.offlineSalesSum = data.offlineSalesSum || 0
					this.onlineProportion = data.onlineProportion || 0
					this.onlineSalesSum = data.onlineSalesSum || 0
					this.salesSum = data.salesSum || 0
					this.list = data.saleslipList || []
					this.c1data = JSON.parse(JSON.stringify({
						series: [{
							data: [{
								"name": "实际销售金额",
								"value": data.salesSum || 0
							}, {
								"name": "退货金额",
								"value": 0
							}]
						}]
					}))
				})
			},
			getProductTypeList() {
				return new Promise((resolve, reject) => {
					this.$g_api.productTypeList().then(({
						data
					}) => {
						if (data?.length > 0) {
							data = data.map((item, index) => {
								item.active = index == 0
								item.children = []
								return item
							})
							this.typeList = data
							resolve(data)
						}
					})
				})
			},
			getProductTypeChildren(parentId) {
				return new Promise((resolve, reject) => {
					this.$g_api.productTypeChildren({
						parentId
					}).then(({
						data
					}) => {
						if (data?.length > 0) {
							data = this.$g_util.concatRequestUrl(data, 'icon')
							data = data.map((item, index) => {
								item.active = index == 0
								return item
							})
							let typeListIndex = this.typeList.findIndex(item => item.id == parentId)
							this.activeTypeIndex = typeListIndex
							if (typeListIndex != -1) {
								this.typeList[typeListIndex].children = data
							}
							// this.typeListChildren = data
							resolve(data)
						} else {
							resolve([])
						}
					})
				})
			},
			onTypeItemTap(index) {
				this.typeList.forEach(async (item, idx) => {
					item.active = index == idx
					if (index == idx && (!item.children || item.children.length == 0)) {
						uni.showLoading({
							title: '加载中'
						})
						await this.getProductTypeChildren(item.id)
						uni.hideLoading()
					}
					this.activeTypeIndex = index
				})
			},
			onSTypeItemTap(index, idx) {
				this.typeList[index].children.forEach((item, i) => {
					item.active = i == idx
				})
			},
			onTypePopResetTap() {
				this.activeTypeIndex = 0
				this.typeList[0].children.forEach((item, i) => {
					item.active = false
				})
			},
			onTypePopConfirmTap() {
				this.typeList[this.activeTypeIndex].children.forEach(item => {
					if (item.active) {
						this.productTypeId = item.id
						this.getSalesWaterList()
					}
				})
				this.showCategory = false
			},
			onTimePickerFlagChange(val) {
				console.log('onTimePickerFlagChangeonTimePickerFlagChange', val);
				this.showDatePicker = val
			},
			onPickerDateChange({
				beginDate,
				endDate,
				dateType,
				dateTypeName
			}) {
				console.log(beginDate,
					endDate,
					dateType,
					dateTypeName);
				this.dateObj.beginDate = beginDate
				this.dateObj.endDate = endDate
				this.dateObj.dateType = dateType
				this.dateObj.dateTypeName = dateTypeName
				this.updatePage()
			}
		}
	}
</script>

<style scoped lang="scss">
	.filter {
		background-color: #fff;
	}

	.filter-item {
		height: 90rpx;

		text {
			font-size: 26rpx;
		}

		.app_arrow {
			&::after {
				right: 0rpx;
				transition: all 0.3s;
				transform: translateY(-70%) rotate(135deg);
			}

			&.active {
				&::after {
					transform: translateY(-10%) rotate(-45deg);
				}
			}
		}
	}

	.box {}

	.box-main {
		padding: 30rpx 30rpx 40rpx 50rpx;
	}

	.box-main_top {}

	.box-main_bottom {
		margin-top: 40rpx;
	}

	.diagram {
		width: 240rpx;
		height: 240rpx;
		flex-shrink: 0;

		image {
			width: 240rpx;
			height: 240rpx;
		}
	}

	.data {
		margin-left: 90rpx;
	}

	.dot-blue {
		position: relative;

		&::before {
			position: absolute;
			left: -26rpx;
			top: 50%;
			content: '';
			width: 16rpx;
			height: 16rpx;
			transform: translateY(-50%);
			border-radius: 50%;
			background-color: #4C88FF;
		}
	}

	.dot-red {
		position: relative;

		&::before {
			position: absolute;
			left: -26rpx;
			top: 50%;
			content: '';
			width: 16rpx;
			height: 16rpx;
			transform: translateY(-50%);
			border-radius: 50%;
			background-color: #FF6666;
		}
	}

	.data-item {
		margin-bottom: 30rpx;
	}

	.data-item_label {
		display: inline-block;
		margin-bottom: 4rpx;
		font-size: 22rpx;
		color: #999;
	}

	.data-item_content {
		// font-weight: bold;
		font-size: 24rpx;
		color: #333;
	}

	.detail {}

	.detail-date {
		padding-left: 30rpx;
		line-height: 80rpx;
		font-size: 26rpx;
		color: #666;
	}

	.list {}

	.item {
		line-height: 1.1;
		padding: 30rpx;
		border-bottom: 1px solid $g-border-color;
	}

	.item-T {
		margin-bottom: 28rpx;
		font-size: 30rpx;

		view {
			&:last-child {
				color: #ff9933;
			}
		}
	}

	.item-B {
		font-size: 24rpx;

		view {
			&:last-child {
				color: #999;
			}
		}
	}

	.item-channel {
		display: inline-block;
		padding: 0rpx 10rpx;
		margin-right: 20rpx;
		font-size: 18rpx;
		line-height: 36rpx;
		border-radius: 6rpx;

		&.offline {
			color: #3377ff;
			background-color: #E5EEFF;
		}

		&.online {
			color: #ff7733;
			background-color: #FFF0E8;
		}
	}
	.pop {
		width: 610rpx;
		// padding: 0 30rpx;
		padding-top: var(--status-bar-height);
	
	}
	
	.pop-header {
		position: relative;
		padding: 0 30rpx;
		line-height: 98rpx;
		// border-bottom: 1px solid #e6e6e6;
		box-sizing: border-box;
	
		&::after {
			position: absolute;
			left: 30rpx;
			bottom: 0;
			content: '';
			width: 550rpx;
			border-bottom: 1px solid #e6e6e6;
		}
	}
	
	.pop-header-L {
		font-size: 28rpx;
		font-weight: bold;
	}
	
	.pop-header-R {
		text {
			margin-left: -20rpx;
			font-size: 24rpx;
			color: #999;
		}
	}
	
	.pop-item-title {
		height: 80rpx;
		padding: 0 30rpx;
	
		&::after {
			transform: translateY(-70%) rotate(135deg);
		}
	
		&.active {
			&::after {
				transform: translateY(-70%) rotate(-45deg);
			}
		}
	}
	
	.pop-main {
		height: calc(100vh - 98rpx - 92rpx - 42rpx - var(--status-bar-height) - 14rpx);
	}
	
	.pop-item {
		&:last-child {
			margin-bottom: 20rpx;
		}
	}
	
	.pop-item-title {
		&::after {
			right: 34rpx;
			border-color: #333;
		}
	
		&.active {
			&::after {
				transform: rotate(-45deg);
			}
		}
	
		text {
			margin-left: -20rpx;
		}
	}
	
	.pop-item-main {
		display: flex;
		flex-wrap: wrap;
		padding: 10rpx 14rpx 10rpx 30rpx;
	}
	
	.pop-item-main_item {
		font-size: 24rpx;
		line-height: 1;
		padding: 18rpx 36rpx;
		margin-right: 16rpx;
		margin-bottom: 16rpx;
		border-radius: 10rpx;
		box-sizing: border-box;
		background-color: #f2f2f2;
	
		&.active {
			border: 1px solid $g-main-color;
			color: $g-main-color;
			background-color: #fff;
		}
	}
	
	.pop-btn {
		padding-bottom: 40rpx;
		padding-top: 14rpx;
	
		.pop-reset {
			margin-left: 30rpx;
			margin-right: 16rpx;
			width: 200rpx;
			height: 90rpx;
			// line-height: 90rpx;
			border-radius: 46rpx;
			font-size: 32rpx;
			border: 1px solid #e6e6e6;
			background: #fff;
			box-sizing: border-box;
		}
	
		.pop-btnHover {
			background: #f9f9f9;
		}
	}
</style>
